import React, { useState, useEffect } from 'react';
import { AddStyle } from './style'
import { InfoCircleOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { Form, Input, Button, DatePicker, message } from 'antd';
import { setStorage, getStorage } from '../../utils/LocalStorage.js'
import { useHistory } from 'react-router-dom'

import { useDispatch } from 'react-redux'

const success = () => {
    message.success('操作成功');
    // message.success(duration = 2)
};

let goodsData = getStorage('goodsMessage') ? JSON.parse(getStorage('goodsMessage')) : []
// 表单的位置调整
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 5,
    },
};
// 表单不可为空
const validateMessages = {
    required: '${label}不可为空'
};

const Index = () => {

    // 使用redux
    const diapatch = useDispatch()

    // 使用hooks
    const [data, setData] = useState({})
    const history = useHistory()
    // 处理input框里面的数据还有上架时间
    const onFinish = (fieldsValue) => {
        const value = {
            ...fieldsValue,
            datePicker: fieldsValue['date-picker'].format('YYYY-MM-DD'),
        }
        setData({
            goodName: value.data.goodName,
            goodNum: parseInt(Math.random() * 10000),
            goodTime: value.datePicker,
            goodBrand: value.data.goodBrand,
            goodAttribute: value.data.goodAttribute,
            goodPrice: value.data.goodPrice,
            goodStock: value.data.goodStock,
            key: Date.now()
        })
        success()
        setTimeout(() => {
            history.push('/home/list')
        }, 2000);
    };

    // 使用useEffect解决useState异步的问题
    useEffect(() => {
        if (JSON.stringify(data) === "{}") {
            return false
        } else {
            goodsData = [...goodsData, data]
            setStorage("goodsMessage", JSON.stringify(goodsData))

            diapatch({
                type: 'goodslist',
                data: goodsData
            })
        }
        
    });
    return (
        <>
            <AddStyle>
                <div className="goodsTop">
                    <span>商品管理</span>
                /
                    <span>添加商品</span>
                </div>
                <hr />
                <div className="title"><InfoCircleOutlined /> 基本信息</div>

                <Form {...layout} onFinish={onFinish} validateMessages={validateMessages}>

                    <Form.Item
                        name={['data', 'goodName']}
                        label="商品名称"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name={['data', 'goodNum']}
                        label="商品编号"
                    >
                        <Input disabled={true} placeholder='自动生成' />
                    </Form.Item>

                    <Form.Item
                        name="date-picker"
                        label="上架时间"
                        rules={[{
                            type: 'object',
                            required: true,
                            message: '请选择时间',
                        }]}>
                        <DatePicker />
                    </Form.Item>

                    <Form.Item
                        // goodBrand 商品品牌
                        name={['data', 'goodBrand']}
                        label="商品品牌"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['data', 'goodAttribute']}
                        label="商品属性"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['data', 'goodPrice']}
                        label="商品价格"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        // goodStock 商品库存
                        name={['data', 'goodStock']}
                        label="商品库存"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 11 }}>
                        <Button type="primary" htmlType="submit" icon={<CheckCircleOutlined />}>添加</Button>
                    </Form.Item>
                    <Form.Item className="btnBox" wrapperCol={{ ...layout.wrapperCol, offset: 9 }}>
                        <Button
                            className="btn"
                            type="primary"
                            icon={<CloseCircleOutlined />}
                            onClick={() => {
                                history.push('/home/list')
                            }}
                        >取消</Button>
                    </Form.Item>
                </Form>

            </AddStyle>
        </>
    );
}

export default Index;

